<!-- 消息详情页面 -->
<!-- 小瓜子 更新于2020.8.21 -->
<template>
	<view class="message"> 
		<!-- 自定义导航栏(navigationbar) -->
		<view class="nav">
			<view :class="activeSwiper == 0 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="0"><text>评论/回复</text></view>
			<view :class="activeSwiper == 1 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="1"><text>动态消息</text></view>
			<view :class="activeSwiper == 2 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="2"><text>提到了我</text></view>
			<view :class="activeSwiper == 3 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="3"><text>系统通知</text></view>
		</view>
		<!-- 占位盒子 -->
		<view class="top_block"></view>
		<!-- 页面主体内容，使用swiper，实现左右滑动翻页 -->
		<swiper 
			:style="'height:' + swiperItemHeight + 'px;'" 
			@change="swiperChange" 
			:current="activeSwiper" >
			<!-- 评论/回复 -->
			<swiper-item>
				<view :class="activeSwiper == 0 ? 'page page_active' : 'page'">
					<ReplyBox v-for="(item,index) in SummaryList[0]" :userId="item.sender_id" :key="index" :datas="item"  @deleteData='deleteData'></ReplyBox>
					<view class="noMore">没有东西啦！</view>
				</view>
			</swiper-item>
			<!-- 点赞 -->
			<swiper-item>
				<!-- <Praise :datas="testData[0]"></Praise> -->
				<view :class="activeSwiper == 1 ? 'page page_active' : 'page'">
					<Praise v-for="(item,index) in SummaryList[1]" :userId="item.sender_id" :key="index" :datas="item" @deleteData='deleteData'></Praise>
					<view class="noMore">没有东西啦！</view>
				</view>
			</swiper-item>
			<!-- 提到了我 -->
			<swiper-item>
				<view :class="activeSwiper == 2 ? 'page page_active' : 'page'">
					<!-- <AtMessages :datas="testData[0]" :userId="testData[0].sender_id"></AtMessages> -->
					<AtMessages v-for="(item,index) in SummaryList[2]" :userId="item.sender_id" :key="index" :datas="item"></AtMessages>
					<view class="noMore">没有东西啦！</view>
				</view>
			</swiper-item>
			<!-- 系统通知 -->
			<swiper-item>
				<view :class="activeSwiper == 3 ? 'page page_active' : 'page'">
					<SystemNotice v-for="(item,index) in SummaryList[3]" :key="index" :datas="item"></SystemNotice>
					<view class="noMore">没有东西啦！</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import ReplyBox from "../../components/message/ReplyBox.vue"
	import Praise from "../../components/message/Praise.vue"
	import SystemNotice from "../../components/message/SystemNotice.vue"
	import AtMessages from "../../components/message/AtMessages.vue"
	import UniLoadMore from '../../components/plugins/uni-load-more.vue'
	
	
	import { _ajax } from '../../in-xupt-functions.js'
	import { insertData } from '../../in-xupt-functions.js'
	import { opdb } from '../../in-xupt-functions.js'
	
	export default {
		components: {
			ReplyBox,
			SystemNotice,
			Praise,
			AtMessages,
			UniLoadMore
		},
		data() {
			return {
				tableList: [
					'reply_messages',	// 回复提醒表
					'at_messages',		// 艾特提醒表
					'news_messages', 	// 动态提醒表
					'system_messages' 	// 系统提醒表
				],
				urlList: [
					'reply',
					'news',
					'at',
					'system'
				],
				activeSwiper: 0, // 判断是哪一栏被显示（我关注的/所有圈子）
				swiperItemHeight: 0, // swiper容器的高度
				SummaryList: [[],[],[]],
				urls: ['/notices/reply','/notices/news','/notices/at','/notices/system'],
				// loading前：more; loading中：loading; 没有更多了：noMore
				status: "more", 
				contentText: {
					contentdown: "下拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				userId: undefined
			}
		},
		watch:{
			SummaryList(n,p) {
				// this.getheight(200)
			}
		},
		updated() {
			this.getheight(10);
		},
		methods: {
			deleteData: function(itemId) {
				// let tempArr
				// tempArr = this.SummaryList[this.activeSwiper].filter(item => {
				// 	return item.id != itemId
				// })
				// this.SummaryList[this.activeSwiper] = tempArr
				// var that = this;
				// uni.showActionSheet({
				// 	itemList: ['删除'],
				// 	success(e) {
				// 		if(e.tapIndex == 0) {
				// 			// #ifdef APP-PLUS
				// 				// 打开数据库
				// 				while(!plus.sqlite.isOpenDatabase({
				// 					name: 'notice',
				// 					path: '_doc/a.db'
				// 				})) {
				// 					opdb('notice','_doc/a.db')
				// 				}
				// 				// 删除数据
				// 				plus.sqlite.executeSql({
				// 					name: 'notice',
				// 					sql: 'delete from ' + that.tableList[that.activeSwiper] + ' where id=' + itemId,
				// 					success: (e) => {
				// 						that.getDataFromDataBase(that.activeSwiper)
				// 					},
				// 					fail: (err) => {
				// 						plus.sqlite.closeDatabase({
				// 							name:'notice',
				// 							success: () => {
				// 								console.log('close db when fail to delete data')
				// 							},
				// 							fail: () => {
				// 								console.log('fail to close db')
				// 							}
				// 						})
				// 					}
				// 				})
				// 			// #endif
				// 		}
				// 	}
				// })
			},
			// 点击上方tab栏的项目时，更新当前index (activeSwiper)
			swichTab: function (e) {
				this.activeSwiper = e.currentTarget.dataset.index
			},
			// 当滑动swiper或者点击导航栏上的选择项目时，重新获取swiper高度
			swiperChange: function (data) {
				this.SummaryList = [[],[],[]]
				this.activeSwiper = data.detail.current;
				// #ifdef APP-PLUS
				opdb('notice','_doc/a.db')
				.then(() => {
					this.getDataFromBackEnd(this.activeSwiper);
				})
				// #endif
			},
			// 获取当前swiper高度
			getheight: function(time) {
				setTimeout(() => {
					// 获取当前swiper-item的高度
					let query = uni.createSelectorQuery();
					let page_active = query.select(".page_active");
					page_active.fields({
						size: true
					}, data => {
						// 当设备高度高于swiper-item高度时，直接显示没有更多数据
						uni.getSystemInfo({
							success: (data2) => {
								if(data2.windowHeight - 80 >= data.height){
									this.status = "noMore"
								}
								this.swiperItemHeight = Math.max(data2.windowHeight - 30, data.height);
							}
						})
					}).exec();
				},time)
			},
			// 从数据库中获取数据
			getDataFromDataBase: function (index) {
				plus.sqlite.selectSql({
					name: 'notice',
					sql: 'select * from ' + this.tableList[index],
					// sql: 'select * from ' + this.tableList[index],
					success: (e) => {
						console.log("从数据库中读取的数据")
						console.log(e)
						// 成功读取数据之后，将数据写到页面的内存中去
						this.SummaryList[index].push(...e);
						// 反转
						this.SummaryList[index].reverse();
						this.SummaryList[index] = this.SummaryList[index].filter(item => {
							return item.user_id == this.userId
						})
						if(this.SummaryList[index].length == 0) {
							this.getheight(200)
						}
						// 操作完成后，关闭数据库
						console.log(this.SummaryList[index])
						plus.sqlite.closeDatabase({
							name: 'notice',
							success: () => {
								console.log('close db after select data from db')
							},
							fail: () => {
								console.log('fail to close db')
							}
						});
					},
					fail: (err) => {
						console.log(err);
						plus.sqlite.closeDatabase({
							name: 'notice',
							success: () => {
								console.log('close db after select data from db')
							},
							fail: () => {
								console.log('fail to close db')
							}
						});
					}
				})
			},
			getDataFromBackEnd: function(index) {
				_ajax({
					url: '/notices/' + this.urlList[index]
				})
				.then(res => {
					console.log(res)
					// #ifdef APP-PLUS
					// 如果返回的数据为空，则直接在数据库中读取数据
						if(res.data.data.length == 0){
							// 调用函数读取数据库中的数据
							this.getDataFromDataBase(index);
							return
						}else {
							// 如果返回的数据不为空，则：
							// 先将返回的数据反转，按照时间排序
							// 调用函数将返回的数据写入到本地的数据库中去
							res.data.data.reverse()
							insertData(index,res.data.data,this)
						}
						
					// #endif
				})
				.catch(err => {
					console.log(err)
				})
			}
		},
		onShow() {
			
		},
		onLoad: function(){
			let that = this;
			// 获取userId
			this.userId = uni.getStorageSync('userId');
			// 在页面加载时，向后台请求评论/回复的数据
			// #ifdef APP-PLUS
			opdb('notice','_doc/a.db')
			.then(() => {
				that.getDataFromBackEnd(0);
			})
			// #endif
		}
	}
</script>

<style lang="less">
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	.inxupttubiao36::before {
		font-weight: 800;
		color: #FFFFFF;
		font-size: 18px;
	}

	.message {
		background-color: @g-background;
		.top_block {
			height: 40px;
			width: 100%;
		}
		.nav {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			margin-bottom: 10px;
			// padding-bottom: 10rpx;
			height: 35px;
			width: 100%;
			background-color: #FFFFFF;
			font-size: 14px;
			color: @g-gray;
			box-shadow: 0rpx 0rpx 5px rgba(0,0,0,.1);
			z-index: 2;
			.listTitle,
			.listTitle_active {
				display: inline-block;
				line-height: 30px;
				width: 25%;
				text-align: center;
				padding-bottom: 5px;
			}
			.listTitle_active {
				color: #000;
				font-weight: 800;
				border-bottom: 2px solid @g-pink;
			}
			.creat {
				margin-left: 50rpx;
				margin-top: 10px;
				width: 50rpx;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-radius: 5px;
				background-color: @g-pink;
			}
		}
		swiper {
			color: #000;
			z-index: 0;
		}
		.noMore {
			width: 100%;
			padding-bottom: 10px;
			font-size: 14px;
			color: @g-gray;
			text-align: center;
		}
		.page {
			width: 100%;
		}
	}
</style>
